<template>
  <div class="priority-control">
    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.prioritycontrol')}}</div>
    <el-row>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="100px">
            <el-form-item
                :label="$t('openatccomponents.overview.delay') + ':'"
                prop="intersection">
                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.delay" size="mini"></el-input-number>
               <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.priorityType') + ':'"
                prop="count">
                <el-select v-model="manualInfo.type" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in typeSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
           </el-form>
      </el-col>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="100px">
            <el-form-item
                :label="$t('openatccomponents.overview.duration') + ':'"
                prop="intersection">
                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="mini"></el-input-number>
               <!-- <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.priorityPhase') + ':'"
                prop="count">
                <el-select v-model="manualInfo.phase" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="(item, index) in phaseSelect"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    <div class="single-model">
                        <xdrdirselector Width="40px" Height="40px" :showlist="item.item"></xdrdirselector>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                    </div>
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
           </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="100px">
            <el-form-item
                :label="$t('openatccomponents.overview.level') + ':'"
                prop="count">
                <el-select v-model="manualInfo.level" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in levelOption"
                    :key="item.value"
                    :label="$t('openatccomponents.overview.levelOption' + item.value)"
                    :value="item.value">
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
           </el-form>
      </el-col>
    </el-row>
    <div class="footer" v-if="realtimeStatusModalvisible">
        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
    </div>
    <div class="footer" v-if="!realtimeStatusModalvisible">
        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
    </div>
  </div>
</template>

<script>
import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
import { getTheme } from '../../../../utils/auth'
import { getDirName } from './utils'
export default {
  name: 'prioritycontrol',
  components: {
    xdrdirselector
  },
  props: {
    realtimeStatusModalvisible: {
      type: Boolean,
      default: true
    },
    phaseList: {
      type: Array
    }
  },
  data () {
    return {
      levelOption: [{
        value: 1,
        label: 1
      }, {
        value: 2,
        label: 2
      }, {
        value: 3,
        label: 3
      }, {
        value: 4,
        label: 4
      }, {
        value: 5,
        label: 5
      }],
      typeSelect: [{
        value: 0,
        label: this.$t('openatccomponents.overview.typeOption0')
      }, {
        value: 1,
        label: this.$t('openatccomponents.overview.typeOption1')
      }],
      phaseSelect: [],
      manualInfo: {
        level: 1,
        phase: 1,
        type: 0,
        duration: 300,
        delay: 0
      }
    }
  },
  created () {
    this.getSelect(this.phaseList)
  },
  methods: {
    getSelect (list) {
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      this.phaseSelect = list.map((item, index) => {
        let dirArr = []
        for (let rec of item.direction) {
          let recd = {
            id: rec,
            color: color
          }
          dirArr.push(recd)
        }
        let nameArr = getDirName(dirArr)
        let name = ''
        nameArr = nameArr.map(record => this.$t(record))
        name = nameArr.join(',')
        return {
          label: name,
          item: dirArr,
          value: item.id
        }
      })
    },
    handleClose () {
      this.$emit('closePhaseBack')
    },
    handleManualControl () {
      let submitdata = {
        control: 24,
        delay: this.manualInfo.delay,
        duration: this.manualInfo.duration,
        type: this.manualInfo.type,
        phase: this.manualInfo.phase,
        level: this.manualInfo.level
      }
      console.log(submitdata, 'submitdata')
      this.$emit('closePhaseControl', submitdata)
    }
  }
}
</script>

<style>

</style>
